<template>
  <div class="edit-profile-container">
    <div style="width: 100%;">
      <van-icon
          style="position:fixed;top: 20px;left: 20px;cursor: pointer;border-radius: 50%"
          name="arrow-left" color="black"
          size="30px" @click="back"/>
    </div>
    <div class="header">
      <span class="title">编辑资料</span>
    </div>
    <div class="profile-info">
      <div class="form-item">
        <label class="la">头像</label>
      </div>
      <!--      <div class="avatar">-->
      <!--        <img :src="avatarUrl" alt="头像">-->
      <!--      </div>-->
      <el-upload
          align="left"
          class="avatar-uploader"
          action="http://localhost:10086/api/user/users/upload/uploadLocal"
          :show-file-list="false"
          :on-success="handleAvatarSuccess">
        <img v-if="avatarUrl" :src="avatarUrl" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
      <div class="form-item">
        <label class="la">昵称</label>
        <input v-model="user.nickname" type="text">
      </div>
      <div class="form-item">
        <label class="la">出生日期</label>
        <el-date-picker
            v-model="user.birthday"
            type="date"
            placeholder="选择日期">
        </el-date-picker>
        <i class="fas fa-calendar-alt calendar-icon"></i>
      </div>
      <div class="form-item">
        <label class="la">性别</label>
        <div class="gender-options">
          <input type="radio" id="male" v-model="user.sex" value="男">
          <label for="male">男</label>
          <input type="radio" id="female" v-model="user.sex" value="女">
          <label for="female">女</label>
        </div>
      </div>
      <div class="form-item">
        <label class="la">电话号码</label>
        <input v-model="user.phoneNumber" type="text">
      </div>
      <div class="form-item">
        <label class="la">地址</label>
        <input v-model="user.address" type="text">
      </div>
    </div>
    <div class="save-btn-container">
      <button @click="saveProfile">保存</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      avatarUrl: '',
      user: {
        userId: '',
        nickname: '',
        phoneNumber: '',
        imageUrl: '',
        birthday: '',
        sex: '',
      },
      userId: '',
    };
  },
  created() {
    var user = localStorage.getItem("currentUser")
    if (user == null) {
      this.$message.error("请先登录")
      this.$router.push("/login")
      return;
    }
    this.userId = JSON.parse(user).userId
    this.getById()
  },
  methods: {
    getById() {
      this.axios.get("http://localhost:10086/api/user/users/getById/" + this.userId).then(res => {
        if (res.data.code == 200) {
          this.user = res.data.data
          this.avatarUrl = res.data.data.imageUrl
        } else {
          console.log(res.data.message)
        }
      })
    },
    back() {
      this.$router.push("/my")
    },
    saveProfile() {
      if (this.user.phoneNumber == '') {
        this.$message.error("手机号不能为空");
        return;
      }
      var phone = this.user.phoneNumber;
      var reg = /^1[3-9]\d{9}$/;
      if (!reg.test(phone)) {
        this.$message.error("手机号格式不正确");
        return;
      }
      this.axios.put("http://localhost:10086/api/user/users/update", this.user).then(res => {
        if (res.data.code == 200) {
          this.$message.success('修改成功')
          localStorage.setItem("currentUser", JSON.stringify(this.user))
          this.$router.push("/my")
        } else {
          this.$message.error('修改失败')
        }
      })
    },
    handleAvatarSuccess(res, file) {
      console.log(res);
      console.log(file.raw);
      this.$message.success('上传成功')
      this.avatarUrl = URL.createObjectURL(file.raw)
      this.user.imageUrl = res.data
    },

  }
}
</script>

<style scoped>
.la {
  text-align: left;
}

.edit-profile-container {
  background-color: white;
  padding: 20px;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.back-icon {
  font-size: 24px;
  color: black;
  cursor: pointer;
}

.title {
  margin: auto;
  font-size: 18px;
  font-weight: bold;
}

.profile-info {
  margin-bottom: 30px;
}

.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 20px;
  margin-top: -20px;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.form-item {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}

.form-item label {
  font-size: 16px;
  margin-bottom: 5px;
}

.form-item input {
  padding: 10px;
  border: 1px solid #e0e0e0;
  border-radius: 5px;
}

.calendar-icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  color: #999;
}

.gender-options {
  display: flex;
  align-items: center;
}

.gender-options input {
  margin-right: 10px;
}

.save-btn-container {
  text-align: center;
}

.save-btn-container button {
  background-color: #007aff;
  color: white;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>